@import "tailwindcss";
@import "@nuxt/ui";
@import './bc-vars.scss';
@import './public.css';
@import './bc-public.scss';

/*
🧑‍💻🧑‍💻 所有使用z-index的元素 1\2\3这种小级别的可不写 🧑‍💻🧑‍💻

体育盘口信息展示更多时
app-sports-market-info
z-index: 9;

AppSportsHomeNavs
z-index: 98;

header组件
z-index: 99;

登录页面
z-index: 100;

🔖体育投注单浮动窗口
.app-sports-bet-slip
z-index: 100;

🔖体育球种列表
.app-all-sports-list
z-index: 101;

🔖体育子页面loading
z-index:101;

🔖体育首页loading
z-index:102;

🔖AppFooter
z-index:110;

🔖弹窗组件
.yl-dialog__wrapper
z-index: 2000;



*/

@theme {
  --tg-sports-bet-slip-box-shadow: 0 0 60px rgba(0, 0, 0, 0.65);
  --tg-sports-bet-slip-num-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px 0px;

  /*品牌色*/
  --color-brand-hsl: 150;
  --color-brand: hsla(var(--color-brand-hsl), 86%, 54%, 1);
  --color-brand-100: hsla(var(--color-brand-hsl), 86%, 54%, 0.1);
  --color-brand-200: hsla(var(--color-brand-hsl), 86%, 54%, 0.2);
  --color-brand-300: hsla(var(--color-brand-hsl), 86%, 54%, 0.3);
  --color-brand-400: hsla(var(--color-brand-hsl), 86%, 54%, 0.4);
  --color-brand-500: hsla(var(--color-brand-hsl), 86%, 54%, 0.5);
  --color-brand-600: hsla(var(--color-brand-hsl), 86%, 54%, 0.6);
  --color-brand-700: hsla(var(--color-brand-hsl), 86%, 54%, 0.7);
  --color-brand-800: hsla(var(--color-brand-hsl), 86%, 54%, 0.8);
  --color-brand-900: hsla(var(--color-brand-hsl), 86%, 54%, 0.9);

  /*白色*/
  --color-white-hsl: 0;
  --color-white-0: hsla(var(--color-white-hsl), 0%, 100%, 1);
  --color-white-50: hsla(var(--color-white-hsl), 0%, 100%, 0.05);
  --color-white-100: hsla(var(--color-white-hsl), 0%, 100%, 0.1);
  --color-white-200: hsla(var(--color-white-hsl), 0%, 100%, 0.2);
  --color-white-300: hsla(var(--color-white-hsl), 0%, 100%, 0.3);
  --color-white-400: hsla(var(--color-white-hsl), 0%, 100%, 0.4);
  --color-white-500: hsla(var(--color-white-hsl), 0%, 100%, 0.5);
  --color-white-600: hsla(var(--color-white-hsl), 0%, 100%, 0.6);
  --color-white-700: hsla(var(--color-white-hsl), 0%, 100%, 0.7);
  --color-white-800: hsla(var(--color-white-hsl), 0%, 100%, 0.8);
  --color-white-900: hsla(var(--color-white-hsl), 0%, 100%, 0.9);

  /*黑色*/
  --color-black-hsl: 0;
  --color-black-0: hsla(var(--color-black-hsl), 0%, 0%, 1);
  --color-black-50: hsla(var(--color-black-hsl), 0%, 0%, 0.05);
  --color-black-100: hsla(var(--color-black-hsl), 0%, 0%, 0.1);
  --color-black-200: hsla(var(--color-black-hsl), 0%, 0%, 0.2);
  --color-black-300: hsla(var(--color-black-hsl), 0%, 0%, 0.3);
  --color-black-400: hsla(var(--color-black-hsl), 0%, 0%, 0.4);
  --color-black-500: hsla(var(--color-black-hsl), 0%, 0%, 0.5);
  --color-black-600: hsla(var(--color-black-hsl), 0%, 0%, 0.6);
  --color-black-700: hsla(var(--color-black-hsl), 0%, 0%, 0.7);
  --color-black-800: hsla(var(--color-black-hsl), 0%, 0%, 0.8);
  --color-black-900: hsla(var(--color-black-hsl), 0%, 0%, 0.9);

  /*功能色*/
  --color-function-red: hsla(0, 97%, 61%, 1);
  --color-function-red-15: hsla(0, 97%, 61%, 0.15);
  --color-function-orange: hsla(32, 100%, 56%, 1);
  --color-function-green: hsla(107, 76%, 48%, 1);
  /*需要调整*/
  --color-function-green-300: hsla(107, 26%, 28%, 1);
  --color-function-blue: hsla(219, 100%, 50%, 1);
  /*需要调整*/
  --color-function-blue-200: hsla(219, 100%, 50%, 1);
  --color-function-yellow: hsla(47, 100%, 73%, 1);

  /*字体颜色*/
  --color-text-white-0: hsla(0, 0%, 100%, 1);
  --color-text-white-1: hsla(193, 10%, 73%, 1);
  --color-text-white-2: hsla(193, 10%, 73%, 1);
  --color-text-white-3: hsla(195, 5%, 67%, 1);
  --color-text-white-4: hsla(210, 1%, 63%, 1);
  --color-text-white-5: hsla(191, 7%, 55%, 1);
  --color-text-white-6: hsla(0, 0%, 46%, 1);

  /*背景色*/
  --color-bg-black-0: #000000;
  --color-bg-black-1: #1d2020;
  --color-bg-black-2: #222525;
  --color-bg-black-3: #292d2e;
  --color-bg-black-4: #323839;
  --color-bg-black-5: #3a4041;
  --color-bg-black-6: #4a5354;
  --color-bg-black-7: #212526;
  --color-bg-black-8: hsla(0, 0%, 85%, 1);
  --color-bg-black-9: hsla(196, 9%, 25%, 1);
  --color-bg-black-10: hsla(173, 7%, 24%, 1);
  --color-bg-black-11: hsla(0, 0%, 0%, 1);
  --color-bg-black-12: hsla(190, 8%, 31%, 1);

  /*边框色*/
  --color-border-black-1: hsla(180, 5%, 12%, 1);
  --color-border-black-2: hsla(180, 4%, 14%, 1);
  --color-border-black-3: hsla(192, 6%, 17%, 1);
  --color-border-black-4: hsla(190, 6%, 21%, 1);
  --color-border-black-5: hsla(187, 6%, 24%, 1);
  --color-border-black-6: hsla(186, 6%, 31%, 1);
}

[data-theme='light'] {
  /* // 文字颜色（反转暗黑主题） */
  --color-text-white-0: rgba(23, 26, 26, 1);
  --color-text-white-1: rgba(23, 26, 26, 1);
  --color-text-white-2: rgba(95, 109, 109, 1);
  --color-text-white-3: rgba(146, 160, 159, 1);
  --color-text-white-4: rgba(156, 163, 175, 1);
  --color-text-white-5: rgba(176, 185, 185, 1);
  --color-text-white-6: rgba(201, 209, 209, 1);

  /* // 背景颜色（反转暗黑主题） */
  --color-bg-black-1: rgba(255, 255, 255, 1);
  --color-bg-black-2: rgba(245, 245, 245, 1);
  --color-bg-black-3: rgba(235, 235, 235, 1);
  --color-bg-black-4: rgba(225, 225, 225, 1);
  --color-bg-black-5: rgba(215, 215, 215, 1);
  --color-bg-black-6: rgba(205, 205, 205, 1);
  --color-bg-black-7: rgba(205, 205, 205, 1);

  /* // 品牌色保持不变 */
  --color-brand: #24ee89;
  --color-brand-600: rgba(39, 86, 62, 1);
  --color-brand-700: rgba(61, 103, 81, 1);
  --color-brand-100: rgba(36, 238, 137, 0.1);
  --color-brand-200: rgba(36, 238, 137, 0.2);
  --color-brand-30: rgba(36, 238, 137, 0.3);

  /* // 功能色保持不变 */
  --color-function-red: rgba(252, 60, 60, 1);
  --color-function-blue: rgba(15, 98, 254, 1);
  --color-function-green: rgba(69, 217, 30, 1);
  --color-function-orange: rgba(255, 152, 32, 1);
  --color-function-yellow: rgba(255, 225, 117, 1);
  --color-function-purple: rgba(129, 75, 246, 1);

  /* // 渐变保持不变 */
  --gradient-brand: linear-gradient(rgba(36, 238, 137, 1) 0%, rgba(159, 232, 113, 1) 100%);
}

